.rankbox {
    position: fixed;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--box-color);
    overflow-y: scroll;
    z-index: 1;
    transition: all 0.3s ease-in-out;

    .blankbox {
        height: 61px;
        width: 100%;
    }

    .topbox {
        position: fixed;
        top: 0;
        left: 100%;
        transition: all 0.3s ease-in-out;
        border-bottom: 1px solid var(--border-color);
        background-color: var(--box-color);
    }

    &.show {
        left: 0;

        .topbox {
            left: 0;
        }
    }

    .blankcontentbox {
        padding: 0 16px;
        box-sizing: border-box;
        width: 100%;

        .blankminbox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 14px 0;
            align-items: center;
            .blankimg {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }
            .blankname{
                flex: 1;
                margin-left: 14px;
                color: var(--font-color);
                font-weight: bold;
            }
            .blankicon{
                display: flex;
                align-items: center;
                &.like{
                    i{
                        color: #ee6b7d;
                    }
                }
                .time{
                    font-size: 12px;
                    color: var(--tips-color);
                }
                i{
                    margin-left: 13px;
                    color: var(--icon-color);
                }
            }
        }
    }
}